<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-04-07 09:25:31
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:23:38
-->
<template>
  <div class="fieldDetail">
    <div class="middle-top">
      <div class="footer">
        <div class="goBack" @click="$router.push('/sys/customField')">取消</div>
        <div class="bc" @click="onSubmit">保存</div>
        <div class="previwe" @click="preview">预览</div>
      </div>
    </div>
    <div class="custom">
      <div class="filed">
        <draggable
          class="list-group"
          :list="fieldList"
          :group="{ name: 'comp', pull: 'clone', put: false }"
        >
          <span
            class="list-group-item"
            v-for="item in fieldList"
            :key="item.type"
            @click="Add(item.type)"
          >
            {{ item.name }}
          </span>
        </draggable>
      </div>
      <draggable
        tag="el-collapse"
        class="dragArea list-detail"
        :list="formList"
        group="comp"
        @change="log"
      >
        <detail-content
          v-for="(item, index) in formList"
          :key="index"
          :formList="item"
          @click.native="onChange(item, index)"
          :class="active === index ? 'active' : ''"
          ref="content"
        >
          <slot>
            <template>
              <i
                class="iconClose"
                :class="active === index ? 'iconfont icon-close' : ''"
                @click.stop="del(index)"
              ></i>
            </template>
          </slot>
        </detail-content>
      </draggable>
      <div class="attribute">
        <span>属性设置</span>
        <attri-bute :seting="seting" v-if="setShow"></attri-bute>
      </div>
    </div>
    <el-dialog
      title="预览"
      :visible.sync="dialogProview"
      custom-class="dialogClass"
      width="50%"
    >
      <div v-for="(item, index) in formList" :key="index" style="width: 50%">
        <detail-content
          :formList="item"
          ref="content"
          style="width: 330px"
        ></detail-content>
      </div>

      <span slot="footer">
        <el-button @click="dialogProview = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import AttriBute from "./attriBute.vue";
import draggable from "vuedraggable";
import DetailContent from "./detailContent.vue";
import { customField, getCustomFieldList } from "@/api/signUp";
export default {
  components: {
    draggable,
    DetailContent,
    AttriBute,
  },

  data() {
    return {
      dialogProview: false,
      active: 0,
      seting: {},
      setShow: false,
      fieldList: [
        {
          type: 1,
          name: "单行文本",
          inputTips: "请输入",
          fieldType: "",
          isNull: false,
          isHidden: true,
          text: "",
          disab: 1,
          rules: {
            text: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        },
        {
          type: 2,
          name: "多行文本",
          fieldType: "",
          inputTips: "请输入",
          rowText: "",
          isNull: false,
          isHidden: true,
          disab: 1,
          rules: {
            rowText: [
              {
                required: true,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        },
        {
          type: 3,
          name: "多选",
          fieldType: "",
          required: false,
          isNull: false,
          isHidden: true,
          inputTips: "请选择",
          choiceList: [],
          disab: 1,
          rules: {
            choiceList: [
              {
                required: false,
                message: "请检查是否选择",
                trigger: "change",
              },
            ],
          },
          labelOptions: [
            {
              value: "0",
              label: "选项1",
            },
            {
              value: "1",
              label: "选项2",
            },
          ],
        },
        {
          type: 15,
          name: "单选",
          fieldType: "",
          isNull: false,
          isHidden: true,
          required: false,
          inputTips: "请选择",
          radio: null,
          disab: 1,
          labelOptions: [
            {
              value: "0",
              label: "选项1",
            },
            {
              value: "1",
              label: "选项2",
            },
          ],
          rules: {
            radio: [
              {
                required: false,
                message: "请检查是否选择",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 11,
          name: "日期",
          fieldType: "",
          inputTips: "请选择时间",
          disab: 1,
          dates: "",
          isNull: false,
          isHidden: true,
          rules: {
            dates: [
              {
                required: false,
                message: "请选择日期",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 14,
          name: "日期区间",
          fieldType: "",
          inputTips: "请选择时间",
          disab: 1,
          date: [],
          isNull: false,
          isHidden: true,
          rules: {
            date: [
              {
                required: false,
                message: "请选择日期区间",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 12,
          name: "人员",
          fieldType: "",
          isNull: false,
          isHidden: true,
          inputTips: "请选择",
          disab: 1,
          dropDownPer: "",
          labelOptions: [],
          rules: {
            dropDownPer: [
              {
                required: false,
                message: "请选择",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 13,
          name: "部门",
          fieldType: "",
          isNull: false,
          isHidden: true,
          inputTips: "请选择",
          disab: 1,
          dropDownDet: "",
          labelOptions: [],
          rules: {
            dropDownDet: [
              {
                required: false,
                message: "请选择",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 9,
          fieldType: "",
          name: "上传图片",
          disab: 1,
          fileImg: [],
          isNull: false,
          isHidden: true,
          rules: {
            fileImg: [
              {
                required: false,
                message: "请检查是否已上传图片",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 10,
          name: "上传附件",
          fieldType: "",
          disab: 1,
          isNull: false,
          isHidden: true,
          fileList1: [],
          rules: {
            fileList1: [
              {
                required: false,
                message: "请检查是否已上传附件",
                trigger: "change",
              },
            ],
          },
        },
        {
          type: 16,
          name: "自定义编号",
          inputTips: "请输入",
          fieldType: "",
          isNull: false,
          isHidden: true,
          autoNumber: false, //是否允许手动填写编号
          cusNum: "",
          disab: 1,
          numberRule: [
            {
              type: 1,
              start: "",
              increase: "",
            },
            {
              type: 2,
              fixedChar: "",
            },
          ],
          rules: {
            cusNum: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        },
        // {
        //   name: "栅格布局",
        //   id: 12,
        // },
        {
          type: 18,
          name: "分组标题",
          title: "",
          isHidden: true,
          inputTips: "请输入分组标题名",
        },
      ],
      formList: [],
      formRules: {},
      examType: Number,
    };
  },
  created() {
    var url = window.location.href;
    var arr = url.split("=");
    this.examType = arr[1];
    this.getFieldList();
  },
  methods: {
    // 确定撤回
    async del(i) {
      const confirmResult = await this.$confirm(
        "确定删除该自定义字段嘛?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        this.formList.splice(i, 1);
        this.setShow = false;
      }
      // console.log('确认了删除')
    },
    // 获取自定义表单
    getFieldList() {
      getCustomFieldList({
        examType: this.examType,
      }).then((res) => {
        console.log(res.rows);
        this.formList = res.rows;
        if (this.formList.length !== 0) {
          this.onChange(this.formList[0], 0);
        }
      });
    },
    // 保存
    async onSubmit() {
      if (this.formList.length == 0)
        return this.$message.info("请至少添加一条自定义字段！");
      // if (this.flag !== true) return;
      // this.flag = false;
      let a = this.formList.some((x) => {
        return x.name == "";
      });
      this.formList.forEach((item) => {
        if (item.type == 16) {
          let b = item.numberRule.some((p) => {
            return p.start == "" || p.fixedChar == "" || p.increase == "";
          });
          if (b) return this.$message.info("有自定义编号配置为空，请填写！");
        }
      });
      if (a == true) return this.$message.info("有标识名为空，请填写！");
      for (var i = 0; i < this.formList.length; i++) {
        for (var j = i + 1; j < this.formList.length; j++) {
          if (this.formList[i].name == this.formList[j].name) {
            return this.$message.error("有相同标识名，请修改");
          }
        }
      }

      var fd = new FormData();
      this.formList.map((item) => {
        Vue.set(item, "examType", this.examType);
      });
      fd.append("customFields", JSON.stringify(this.formList));
      fd.append("examType", this.examType);
      let res = await customField(fd);
      // let { data: res } = await customField({
      //   customField: this.list,
      // });
      this.$message.success(res.msg);
      // this.flag = true;
      this.$router.push("/sys/customField");
    },
    // 预览
    preview() {
      this.dialogProview = true;
    },
    // 点击
    onChange(item, i) {
      console.log(i);
      this.active = i;
      this.seting = item;
      this.setShow = true;
    },
    log(e) {
      console.log(e);
      console.log(this.formList);
      // this.active = this.formList.length;
      // this.formRules = this.formList[this.active].rules;
    },
    Add(num) {
      this.active = this.formList.length;
      this.setShow = true;
      if (num === 1) {
        this.formList.push({
          type: 1, //类型
          name: "单行文本", //标识名
          inputTips: "请输入", //提示文字
          fieldType: "", //有用
          isNull: false, //是否必填
          isHidden: true, //是否展示
          text: "", //绑定值
          disab: 1,
          rules: {
            //规则
            text: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 2) {
        this.formList.push({
          type: 2,
          name: "多行文本",
          fieldType: "",
          inputTips: "请输入",
          rowText: "",
          isNull: false,
          isHidden: true,
          disab: 1,
          rules: {
            rowText: [
              {
                required: true,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 3) {
        this.formList.push({
          type: 3,
          name: "多选",
          fieldType: "",
          required: false,
          isNull: false,
          isHidden: true,
          choiceList: [],
          inputTips: "请选择",
          disab: 1,
          exhibition: 1,
          rules: {
            choiceList: [
              {
                required: false,
                message: "请检查是否选择",
                trigger: "change",
              },
            ],
          },
          labelOptions: [
            {
              value: "0",
              label: "选项1",
            },
            {
              value: "1",
              label: "选项2",
            },
          ],
        });
      } else if (num === 15) {
        this.formList.push({
          type: 15,
          name: "单选",
          fieldType: "",
          isNull: false,
          isHidden: true,
          required: false,
          radio: null,
          inputTips: "请选择",
          exhibition: 1,
          disab: 1,
          labelOptions: [
            {
              value: "0",
              label: "选项1",
            },
            {
              value: "1",
              label: "选项2",
            },
          ],
          rules: {
            radio: [
              {
                required: false,
                message: "请检查是否选择",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 11) {
        this.formList.push({
          type: 11,
          name: "日期",
          fieldType: "",
          inputTips: "请选择时间",
          disab: 1,
          dates: "",
          isNull: false,
          isHidden: true,
          rules: {
            dates: [
              {
                required: false,
                message: "请选择日期",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 14) {
        this.formList.push({
          type: 14,
          name: "日期区间",
          fieldType: "",
          inputTips: "请选择时间",
          disab: 1,
          date: [],
          isNull: false,
          isHidden: true,
          rules: {
            date: [
              {
                required: false,
                message: "请选择日期区间",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 12) {
        this.formList.push({
          type: 12,
          name: "人员",
          fieldType: "",
          isNull: false,
          isHidden: true,
          inputTips: "请选择",
          disab: 1,
          dropDownPer: "",
          labelOptions: [
            {
              value: "0",
              label: "选项一",
            },
            {
              value: "1",
              label: "选项二",
            },
          ],
          rules: {
            dropDownPer: [
              {
                required: false,
                message: "请选择",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 13) {
        this.formList.push({
          type: 13,
          name: "部门",
          fieldType: "",
          isNull: false,
          isHidden: true,
          inputTips: "请选择",
          disab: 1,
          dropDownDet: "",
          labelOptions: [],
          rules: {
            dropDownDet: [
              {
                required: false,
                message: "请选择",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 9) {
        this.formList.push({
          type: 9,
          fieldType: "",
          name: "上传图片",
          disab: 1,
          fileImg: [],
          isNull: false,
          isHidden: true,
          rules: {
            fileImg: [
              {
                required: false,
                message: "请检查是否已上传图片",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 10) {
        this.formList.push({
          type: 10,
          name: "上传附件",
          fieldType: "",
          disab: 1,
          isNull: false,
          isHidden: true,
          fileList1: [],
          rules: {
            fileList1: [
              {
                required: false,
                message: "请检查是否已上传附件",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 16) {
        this.formList.push({
          type: 16,
          name: "自定义编号",
          inputTips: "请输入",
          fieldType: "",
          isNull: false,
          isHidden: true,
          autoNumber: false, //是否允许手动填写编号
          cusNum: "",
          disab: 1,
          numberRule: [
            {
              type: 1,
              start: "",
              increase: "",
            },
          ],
          rules: {
            cusNum: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 18) {
        this.formList.push({
          type: 18,
          name: "分组标题",
          title: "",
          isHidden: true,
          inputTips: "请输入分组标题名",
        });
      }
      this.seting = this.formList[this.formList.length - 1];
    },
  },
};
</script>

<style lang="less" scoped>
.fieldDetail {
  height: 95%;
}
.custom {
  display: flex;
  height: 95%;
}
.filed {
  width: 20%;
  border-right: 1px solid #ececec;
}
.list-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .list-group-item {
    margin-left: 10px;
    margin-top: 10px;
    height: 34px;
    width: 120px;
    padding-left: 20px;
    cursor: pointer;
    background-color: #ebf3ff;
    border-radius: 4px;
  }
}
.list-detail {
  width: 60%;
}
.detailContent {
  width: 80%;
  // height: 100%;
}
.active {
  background-color: #eee;
  position: relative;
}
.dragArea {
  height: 100%;
  overflow: auto;
  padding: 0 20px;
}
.attribute {
  overflow: hidden;
  overflow-y: auto;
  padding-top: 20px;
  padding-left: 34px;
  height: 100%;
  border-left: 1px solid #ececec;
  span {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
  }
}
.middle-top {
  padding: 0 20px;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 72px;
  border-bottom: 1px solid #ececec;
  .middle-top-edit {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f2e4d;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    .goBack {
      height: 28px;
      line-height: 28px;
      width: 64px;
      background-color: #fff;
      border: 1px solid #ececec;
      border-radius: 4px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f2e4d;
      text-align: center;
      cursor: pointer;
    }
    .bc {
      height: 28px;
      line-height: 28px;
      width: 64px;
      background-color: #1267fa;
      border-radius: 4px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      cursor: pointer;
      margin: 0 10px;
    }
    .previwe {
      width: 64px;
      height: 28px;
      line-height: 28px;
      border-radius: 4px;
      border: 1px solid #1267fa;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1267fa;
      text-align: center;
      cursor: pointer;
    }
  }
}
.iconClose {
  position: absolute;
  top: 10px;
  right: 20px;
}
/deep/.dialogClass {
  .el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>